<!--
 * @Descripttion: 供应商订单详情
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-10-15 17:35:20
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-23 13:37:13
-->
<template>
	<div class="supplier-detail">
		<div class="order-block">
			<div class="title">订单信息</div>
			<el-form :label-position="'right'" label-width="178px" label-suffix=":" size="mini">
				<div ref="qrCodeDiv" id="aaa" style="display: none;"></div>
				<el-row>
					<el-col :span="12">
						<el-form-item label="所属部门">
							{{ infor.purchaseName }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="订单号">
							{{ infor.orderNo }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="电商订单号">
							{{ infor.eshopNumber }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="订单状态">
							{{ infor.orderState }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="下单时间">
							{{ infor.orderTime | formeTime }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票类型">
							{{ infor.receiptType }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票地址">
							{{ infor.registeredAddress }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="含税总价">
							¥ {{ infor.sumBudget }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="运费">
							¥ {{ infor.freight }}
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="infor.cancelRemark">
						<el-form-item label="取消订单原因">
							{{ infor.cancelRemark }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="下单时填写的备注">
							{{ infor.orderRemark }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="order-block">
			<div class="title">采购人信息</div>
			<el-form :label-position="'right'" label-width="178px" label-suffix=":" size="mini">
				<el-row>
					<el-col :span="12">
						<el-form-item label="采购人">
							{{ infor.purchaserName }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="单位名称">
							{{ infor.purchaseName }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收货地址">
							{{ infor.completeAddress }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收货人">
							{{ infor.consignee }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收货人手机">
							{{ infor.phone }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="付款方式">
							{{ infor.payment }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="送货时间">
							{{ infor.sendRemark }}
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
            <el-form-item label="发票抬头">
              {{ infor.invoice }}
            </el-form-item>
          </el-col> -->
					<el-col :span="12">
						<el-form-item label="税号">
							{{ infor.dutyParagraph }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票打印电话">
							{{ infor.registrationTelephone }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="开户银行">
							{{ infor.depositBank }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="银行账号">
							{{ infor.accountNumber }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票打印地址">
							{{ infor.registeredAddress }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="order-block">
			<div class="title">{{isLocal === '1' ? '供应商信息' : '电商信息'}}</div>
			<el-form :label-position="'right'" label-width="178px" label-suffix=":" size="mini">
				<el-row>
					<el-col :span="12">
						<el-form-item :label="isLocal === '1' ? '供应商名称' : '电商名称'">
							{{ infor.orgNameZh }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="isLocal === '1' ? '供应商简称' : '电商简称'">
							{{ infor.orgNameZhShort }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="营业地址">
							{{ infor.addr }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="法人名称">
							{{ infor.legalPerson }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话">
							{{ infor.contactTel }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="委托代理人">
							{{ infor.contact }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="order-block">
			<div class="title">物流配送信息</div>
			<div v-if="isLocal === '0'">
				<el-table :data="LogisticsList" border :header-cell-style="{ background: '#f5f7fa' }"
					style="width: 100%">
					<el-table-column prop="content" width="260" label="操作信息">
					</el-table-column>
					<el-table-column prop="operator" label="操作人"> </el-table-column>
					<el-table-column prop="operate_time" label="操作时间">
					</el-table-column>
				</el-table>
			</div>
			<div v-else>
				<el-form :label-position="'right'" label-width="178px" label-suffix=":" size="mini">
					<el-row>
						<el-col :span="24" v-for="item in localList" :key="item.id">
							<el-form-item label="物流单号">
								{{ item.logisticNo }}
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<div class="order-block">
			<div class="title">商品信息</div>
			<div>
				<el-table :data="infor.orderDetailList" border :header-cell-style="{ background: '#f5f7fa' }"
					@selection-change="handleSelectionChange" style="width: 100%">
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column width="260" prop="goodsName" label="商品名称"></el-table-column>
					<el-table-column prop="categoryName" label="品目"></el-table-column>
					<el-table-column prop="sku" label="SKU"></el-table-column>
					<el-table-column label="供货服务商">{{infor.orgNameZh}}</el-table-column>
					<el-table-column prop="brandName" label="品牌"></el-table-column>
					<el-table-column prop="typeNo" label="型号"></el-table-column>
					<el-table-column prop="buyNum" label="数量"></el-table-column>
					<el-table-column prop="unit" label="计量单位"></el-table-column>
					<el-table-column prop="price" label="含税单价"></el-table-column>
					<el-table-column prop="budget" label="含税总价"></el-table-column>
					<el-table-column prop="afterSaleStatus" label="退换货"></el-table-column>
				</el-table>
			</div>
		</div>
		<div class="close">
			<el-button type="primary" @click="close">关闭</el-button>
			<el-button type="primary" @click="bbb()">打印发货单</el-button>
		</div>

		<div class="order-block">
			<div class="title">打印记录</div>
			<div>
				<el-table :data="printHistoryLisit" border :header-cell-style="{ background: '#f5f7fa' }" style="width: 100%">
					<el-table-column  prop="incoicelNo" label="打印发货单号"></el-table-column>
					<el-table-column fixed="right" label="操作" width="260">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="ccc(scope.row)">
								详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<el-dialog :visible.sync="dialogTableVisible" width='1360px' title="优采送货单">
			<div id="myHtmlElement" class="order-print" style="position: relative;">
				<div class="order-print-title">
					优采送货单
					<div style="position:absolute;top:-70px;">
						<!-- <vue-qr :text="infor.orderNo" :dotScale="1"
					></vue-qr> -->
						<img :src="currentSrc" style="width: 100px;" />
						<p style="font-size: 10px;zoom: 0.5;">{{qrcode}}</p>
					</div>
				</div>
				<div class="order-print-desc">
					<div class="order-block">
						<el-form :label-position="'right'" label-width="200px" label-suffix=":" size="mini">
							<el-row>
								<el-col :span="12">
									<el-form-item label="发货单号">{{qrcode}}</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="生成日期">{{new Date().toLocaleDateString()}}
										{{new Date().toLocaleTimeString().substr(2,8)}}
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="收货人" v-if="!isBG">{{infor.consignee}}</el-form-item>
									<el-form-item label="收货人" v-else>孙赫</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="联系方式" v-if="!isBG">{{infor.phone}}</el-form-item>
									<el-form-item label="联系方式" v-else>18641453831</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="收货单位">{{infor.purchaseName}}</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="收货地址">{{infor.completeAddress}}</el-form-item>
								</el-col>
								<el-col :span="12" v-if="infor.orderRemark">
									<el-form-item label="备注">{{infor.orderRemark}}</el-form-item>
								</el-col>
								<el-col :span="12" v-if="infor.purchaserName">
									<el-form-item label="下单人">{{infor.purchaserName}}</el-form-item>
								</el-col>
							</el-row>

						</el-form>
					</div>
					<div class="order-block">
						<div class="title">商品信息</div>
						<div>
							<el-table :data="goodsList" border :header-cell-style="{ background: '#f5f7fa' }"
								style="width: 100%">

								<el-table-column label="序号" width="50">
									<template slot-scope="scope">{{scope.$index+1}}</template>
								</el-table-column>
								<el-table-column prop="orderNo" label="优采订单号" width="300"></el-table-column>
								<el-table-column prop="eshopNumber" label="电商订单号"></el-table-column>
								<el-table-column prop="goodsName" label="商品名称"></el-table-column>
								<el-table-column prop="pSCSOrderId" label="PSCS订单号"></el-table-column>
								<el-table-column prop="pSCSDeliveryId" label="PSCS送货号"></el-table-column>
								<el-table-column prop="sku" label="SKU"></el-table-column>
								<el-table-column prop="orgNameZh" label="供货服务商"></el-table-column>
								<!-- <el-table-column prop="buyNum" label="总数量"></el-table-column> -->
								<!-- <el-table-column prop="incoicelNum" label="已打印数量"></el-table-column> -->
								<el-table-column prop="noIncoicelNum" width="100" label="剩余量"></el-table-column>
								<el-table-column prop="incoicelNum" width="100" label="送货数量">
									<template slot-scope="scope">
										 <!-- :disabled="canedit == false" -->
										<el-input type="text" v-model="scope.row.printNum"
											@blur="scope.row.printNum = checkPrintNum(scope.row.noIncoicelNum, scope.row.printNum)" />
									</template>
								</el-table-column>
								<el-table-column prop="unit" label="单位" width="80"></el-table-column>
							</el-table>
						</div>
					</div>
					<div class="order-block">
						<el-form :label-position="'right'" label-width="200px" label-suffix=":" size="mini">
							<el-row>
								<el-col :span="24">
									<el-form-item label="收货单位经手人签字"></el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="收货日期"></el-form-item>
								</el-col>
								<el-col :span="16">
									<el-form-item label="验收人签字"></el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="寄件单位"></el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="寄件联系人"></el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="寄件联系人电话"></el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<p>温馨提示：请与快递公司当面清点签收，收货时如发现异常，请务必在3个让工作日内与平台客服联系，并要求快递公司当场书面核实确认，同时保留货物照片备查。</p>
						<p>签收承诺：我已与快递公司当场清点验收完毕，货物数量正确，包装完好！</p>
					</div>
					
				</div>
			</div>
			<div class="close">
				<el-button type="primary" @click="print">打印订单</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import QRCode from 'qrcodejs2'

	import {
		supplierOrderInfor,
		orderLogistics,
		selectDetailInvoice,
		editInvoice,
		listHistoryByNo
	} from '@/api/supplier.api'
	import moment from 'moment'
	import printJS from 'print-js'
	export default {
		filters: {
			formeTime(val) {
				return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
			}
		},
		components: {
			'qrcode': QRCode
		},
		data() {
			return {
				// 订单信息
				infor: '',
				// 物流信息（电商）
				LogisticsList: [],
				// 是否为本地供应商
				isLocal: '0',
				// 本地供应商物流信息
				localList: [],
				dialogTableVisible: false,
				printProductArr: [],
				imageUrl: require("@/assets/login-logo.png"),
				currentSrc: '',
				skuArr: "",
				goodsList: [],
				qrcode: "",
				isBG: false,
				printHistoryLisit: [],
				canedit:true,
				showId:''
			}
		},

		mounted() {
			this.id = this.$route.query.id
			this.showId = this.$route.query.showId
			this.isLocal = this.$route.query.isLocal
			if (this.id) {
				this.supplierOrderInforFn()
				this.orderLogisticsFn()
			} else {
				this.$alert('暂无相关信息！', '提示', {
					confirmButtonText: '关闭本页',
					type: 'warning',
					callback: (action) => {
						this.close()
					},
				})
			}
		},
		methods: {
			invoiceHistory() {
				var that = this;
				listHistoryByNo({
					orderNo: this.infor.orderNo
				}).then((res) => {
					if(res){
						var list = res;
						var field = "incoicelNo"
						 var fieldList = [],att=[];
						list.map((e)=>{
							fieldList.push(e[field])
						})
						//数组去重
						fieldList = fieldList.filter((e,i,self)=>{
							return self.indexOf(e)==i
						})
						for(var j=0;j<fieldList.length;j++){
							//过滤出匹配到的数据
							var arr = list.filter((e)=>{
								return e.incoicelNo==fieldList[j];
							})
							att.push({
								incoicelNo:arr[0].incoicelNo,
								list:arr
							})
						}
						that.printHistoryLisit = att
					}
				})
			},
			checkPrintNum(noIncoicelNum, printNum) {
				printNum = parseInt(printNum)
				if (printNum > noIncoicelNum) {
					this.$message({
						message: `发货数量不能大于${noIncoicelNum}`,
						type: 'warning'
					})
					return noIncoicelNum;
				}
				return printNum;
			},
			ccc(row){
				this.canedit = false;
				this.skuArr = [];
				for (var i = 0; i < row.list.length; i++) {
					this.skuArr.push(row.list[i].sku);
					row.list[i]['orgNameZh'] = this.infor.orgNameZh;
					row.list[i]['printNum'] = row.list[i]['incoicelNum'];
				}
				this.qrcode = row.incoicelNo;
				this.createQrCode();
				this.goodsList = row.list
				this.dialogTableVisible = true;
			},
			bbb() {
				var that = this;
				if (this.skuArr.length <= 0) {
					this.$message({
						message: '请选择要打印的商品',
						type: 'error'
					})
					return
				}
				
				selectDetailInvoice({
					skus: this.skuArr,
					orderId: this.$route.query.id
				}).then((res) => {
					if (res.length > 0) {
						this.dialogTableVisible = true;
						res.forEach((res) => {
							res.printNum = 0;
						})
						this.goodsList = res;
						this.qrcode = res[0].incoicelNo;
						this.createQrCode();
						if (res.length > 0) {
							that.isBG = res[0].clientCode.indexOf('bg') == 0;
						}

					}
				})

			},
			createQrCode() {
				var that = this;
				new QRCode(this.$refs.qrCodeDiv, {
					text: this.qrcode,
					width: 200,
					height: 200,
					colorDark: "#333333", //二维码颜色
					colorLight: "#ffffff", //二维码背景色
					correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
					margin: 20
				})
				setTimeout(function() {
					var currentSrc = document.getElementById("aaa").childNodes[1].currentSrc;
					that.currentSrc = currentSrc;
				}, 100);
			},
			handleSelectionChange(val) {
				this.printProductArr = val;
				var arr = [];
				for (var i = 0; i < val.length; i++) {
					arr.push(val[i].sku);
				}
				this.skuArr = arr
			},
			print() {
				if(this.canedit == false){
					printJS({
						printable: 'myHtmlElement',
						type: 'html',
						maxWidth: '1360',
						targetStyles: ['*']
					})
				}else{
					var arr = [];
					for (var i = 0; i < this.goodsList.length; i++) {
						// if (this.goodsList[i].incoicelNum > this.goodsList[i].noIncoicelNum) {
						// 	this.$message({
						// 		message: '请检查打印数量',
						// 		type: 'error'
						// 	})
						// 	return
						// }
						if (this.goodsList[i].printNum <= 0) {
							this.$message({
								message: '送货数量必须大于0',
								type: 'error'
							})
							return
						}
						arr.push({
							detailId: this.goodsList[i].detailId,
							orderNo: this.goodsList[i].orderNo,
							invoiceNum: this.goodsList[i].printNum,
							invoiceNo: this.goodsList[i].incoicelNo,
							goodsId: this.goodsList[i].goodsId,
							noInvoiceNum: this.goodsList[i].noIncoicelNum,
							goodsName: this.goodsList[i].goodsName,
							sku: this.goodsList[i].sku
						})
					}
					editInvoice(arr).then((res) => {
						if (res.code == 200) {
							this.bbb();
							printJS({
								printable: 'myHtmlElement',
								type: 'html',
								maxWidth: '1360',
								targetStyles: ['*']
							})
						} else {
							this.$message({
								message: '打印失败',
								type: 'error'
							})
						}
					})
					
					
				}
				
			},

			...mapMutations(['closeTagByPath']),
			// 获取infor
			supplierOrderInforFn() {
				var that = this;
				supplierOrderInfor({
					id:this.id,
					showId:this.showId
				}).then((res) => {
					that.infor = res
					that.invoiceHistory();
					// 判断本钢
					if (that.infor.clientCode) that.isBG = that.infor.clientCode.indexOf('bg') == 0;
				})
			},
			// 关闭本页
			close() {
				this.closeTagByPath(this.$route.path)
				this.$router.push(this.$route.meta.path)
			},
			// 查物流信息
			orderLogisticsFn() {
				orderLogistics(this.id).then((res) => {
					if (res && res.length > 0) {
						if (this.isLocal === '0') {
							const result = res[0].track
							this.LogisticsList = result ? JSON.parse(result) : []
						} else {
							this.localList = res
						}
					}
				})
			},

		},
	}
</script>

<style scoped lang='scss'>
	.supplier-detail {
		background: #fff;
		padding: 20px;
		height: calc(100% - 87px);
		overflow-y: auto;

		.order-block {
			padding-bottom: 28px;
			border-bottom: 1px solid #d4dce7;

			.title {
				padding: 20px 0 10px;
				font-size: 16px;
			}
		}

		.close {
			margin: 20px;
			text-align: center;
		}
	}

	.order-print {
		padding: 0 20px;
		color: #303133;

		&-title {
			font-size: 20px;
			text-align: center;
			padding-bottom: 10px;
			margin-top: 80px;
		}

		&-body {
			margin: 15px 0;
			font-size: 14px;
			border-top: 1px solid #d8d8d8;
			border-left: 1px solid #d8d8d8;

			&-row {
				display: flex;
				border-bottom: 1px solid #d8d8d8;

				.col-title {
					flex: 0 0 100px;
					font-weight: bold;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
				}

				.col2-title {
					flex: 1;
					font-weight: bold;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
					text-align: center;

					&.goodname {
						flex: 0 0 540px;
					}
				}

				.col2-cont {
					flex: 1;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
					text-align: center;

					&.goodname {
						flex: 0 0 540px;
					}
				}

				.col-cont {
					flex: 1;
					padding: 5px;
					border-right: 1px solid #d8d8d8;
				}
			}
		}

		&-desc {
			.title {
				font-weight: bold;
			}

			.el-row {
				margin: 6px 0;
			}
		}

		&-seal {
			text-align: right;

			img {
				height: 240px;
			}
		}

		.invoice {
			width: 100%;
			border-collapse: collapse;
			border-right: 1px solid #d8d8d8;
			border-bottom: 1px solid #d8d8d8;

			tr td {
				padding: 5px;
				border-left: 1px solid #d8d8d8;
				border-top: 1px solid #d8d8d8
			}

			&-head {
				font-weight: bold;
			}

			&-content {
				text-align: left !important;
			}
		}
	}
</style>
